

		
		<link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap/3.3.6/bootstrap.css"/>
		<script src="/bootstrap/js/bootstrap/3.3.6/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src="/bootstrap/js/jquery/2.0.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css">
			html,
			body{
				width: 100%;
				height: 100%;
			}
			/*非常重要的样式让背景图片100%适应整个屏幕*/
			a{
				text-decoration: none !important;
			}
			
			.bg {
				display: table;
				width: 100%;
				height: 100%;
				padding: 100px 0;
				text-align: center;
				color: #fff;
				background-color: gray;
				background-size: cover;
			}
			
			.my-navbar {
				padding: 20px 0;
				transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
			}
			
			.my-navbar a {
				background: transparent !important;
				color: #fff ;
			}
			
			.my-navbar a:hover {
				color: #45bcf9 !important;
				background: transparent;
				outline: 0
			}
			
			.my-navbar a {
				transition: color 0.5s ease-in-out;
			}
			/*-webkit-transition ;-moz-transition*/
			
			.top-nav {
				padding: 0;
				background: #000;
			}
			.container-fluid{
				width: 70%;
			}
			
			button.navbar-toggle {
				background-color: #fbfbfb;
			}
			/*整个背景都是transparent透明的，会看不到，所以再次覆盖一下*/
			
			button.navbar-toggle>span.icon-bar {
				background-color: #dedede
			}
			

			.navbar-nav .active a{
				color: #45bcf9  !important;
				font-size:25px ;
				font-weight: 900;
			}
			
			.display_none{
				display: none;
			}
			.login-box{
				float: right;
				display: inline-block;
			}

			.reg-log,.userConfig{
				margin: 0 10px;
				float:right;
				
				height: 50px;
				line-height: 50px;
			}
			
			.navbar-collapse .login-box a{
				display: inline-block;
				margin: 0 10px;
				color:white;
				
			}
			#avatar{
				height: 80%;
			}

						
		</style>


	
		<nav class="navbar navbar-fixed-top my-navbar top-nav" role="navigation">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
					<a class="navbar-brand" href="#">13500斤 BLOG</a>
				</div>
				<div class="collapse navbar-collapse" id="example-navbar-collapse">
					<ul class="nav navbar-nav">
						<li  id="index" class='{{loc=="index"?"active":""}}'>
							<a  href="/">首页</a>
						</li>
						<li id="tag" class='{{loc=="tag"?"active":""}}'>
							<a  href="/tag">标签</a>
						</li>
						<li id="login" class='{{loc=="login"?"active":""}}'>
							<a  href="#">学无止境</a>
						</li>
						<li  id="register" class='{{loc=="messageBord"?"active":""}}' >
							<a href="/messageBord">问答</a>
						</li>
					</ul>
					<div  login={{isLogin}} class="login-box">
						<div class="reg-log">
							<a class="" href="/register/login">登陆 / 注册</a>
						</div>
						<div class="userConfig display_none">
							<img class="img-circle" id="avatar" src={{avatar}}>
							<a class="name" href="/userConfig"><span class="name">{{name}}</span></a>
							<a class=" logout " href="/logout">注销</a>
						</div>
					</div>
						
					</div>
				</div>
				
			</div>
		</nav>

		<script type="text/javascript">
				$(window).scroll(function() {
				
				if($("html").scrollTop() > 400) {
					$(".navbar-fixed-top").fadeOut();
				} else {
					$(".navbar-fixed-top").fadeIn();
				}
			})	
			
			var flag =  $(".login-box").attr("login")
			if(flag){
				$(".userConfig").removeClass("display_none")
				$(".reg-log").addClass("display_none")
			}else{
				
				$(".reg-log").removeClass("display_none")
				$(".userConfig").addClass("display_none")
			}
		</script>

	